<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="../css/component/mic.css"/>
    <style>
    	html,body{
    		width: 100%;
            height: 100%;
            background-color: #2196F3;
            
    	}
        .start-mic{
            position: absolute;
            background-color: #2196F3;
            padding: 20px;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            top: 0px;bottom: 0px;left: 0px;right: 0px;
            margin: auto;
        }
        .mic-time{
            position: absolute;
            display: table;
            width: 100%;
            height: 50%;
            bottom: 0px;
            padding-top: 140px;
            text-align: center;
            color: #fff;
            font-size: 20px;
        }
        .mic-check{
            position: absolute;
            bottom: 0px;
            right: 0px;
            width: 28px;
            padding: 15px;
        }
        .checkActive{
            background-color: #42A5F5;
        }
        .con{
            position: relative;
            position: absolute;
            top: 0px;bottom: 0px;left: 0px;right: 0px;
            margin: auto;
            width: 142px;
            height: 142px;
        }
    </style>
</head>
<body>
    <div class="mic-time">
        <span id="txt"></span>
    </div>
	<div class="start-mic">
        <img src="../image/png/voice/mic.png" width="100">   
    </div>
    <div class="con">
        <div class="animated circle1"></div>
        <div class="animated circle2"></div>
    </div>
        
    <div class="mic-check" tapmode="checkActive" onclick="stopRecord()">
        <img src="../image/png/voice/check.png" width="24">
    </div>
    
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    
    var circle1 = $api.dom('.circle1');
    var circle2 = $api.dom('.circle2');
    $api.addCls(circle1, 'animated');
    $api.addCls(circle2, 'animated');

    // 音频文件的命名方法：i + 当前时间戳 + .amr
    var timestamp = (new Date()).valueOf().toString();
    var micName = 'i' + timestamp + '.amr';
    // alert(micName);
    var c=0;
    var t;
    function timedCount() {
        Number.prototype.formatTime=function(){
            // 计算
            var h=0,i=0,s=parseInt(this);
            if(s>60){
                i=parseInt(s/60);
                s=parseInt(s%60);
                if(i > 60) {
                    h=parseInt(i/60);
                    i = parseInt(i%60);
                }
            }
            // 补零
            var zero=function(v){
                return (v>>0)<10?"0"+v:v;
            };
            return [zero(h),zero(i),zero(s)].join(":");
        };
        document.getElementById('txt').innerHTML=Number(c).formatTime();
        c=c+1;
        t=setTimeout("timedCount()",1000);
    };
    
    // 当mic页面被调用时，直接开启录音
    function startRecord() {
        api.startRecord({
            path: 'fs://' + micName
        });
        timedCount();
    };

    function stopRecord() {
        api.stopRecord(function( ret, err ){
            if( ret ){
                var src = ret.path;
                var time = ret.duration;
                createDetail(src, time);
            } 
        });
    };

    function createDetail(src, time) {
        var detailString = src + ',' + time.toString();
        InsertNewWord(detailString);
    };

    // =============================================
    // 写入新的数据
    function InsertNewWord(detail) {
        var db = api.require('db');
        db.openDatabase({
            name: 'inote',
            path: 'fs://inote.db'
        }, function(ret, err){
            if(ret.status){
                // 相关的操作放在这里
                insert(detail);
                closeDatabase();
            }else{
                api.alert({msg:err.msg});
            }
        });
        
    };
    function closeDatabase() {
        var db = api.require('db');
        db.closeDatabase({
            name:'inote'
        }, function(ret, err){
            if(ret.status){
                // api.alert({msg:'关闭数据库成功'});
            }else{
                api.alert({msg:'error'});
            }
        });      
    };
    function executeSql(sql) {
        var db = api.require('db');
        db.executeSql({
            name: 'inote',
            sql: sql
        }, function(ret, err){
            if(ret.status){
                api.openWin({
                    name: 'root',
                    reload: true
                });
                setTimeout(api.closeWin(), 3000);
            }else{
                api.alert({msg:err.msg});
            }
        });
    };
    function insert(detail) {
        var sql = "INSERT INTO Text (type, detail) VALUES ('3', '"+detail+"')";
        executeSql(sql);
    };

	apiready = function(){
        startRecord();
	};
    
</script>
</html>